<!DOCTYPE html>
<html>
<head>
	<title>vue实例</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="./js/vue.js"></script>
	<style type="text/css">
		
		
	</style>
</head>
<body>
	<div id="app">
		<table>
			<tbody>

				<!-- 由于html语法规定，有些标签下只能跟特定的标签，如tbody里面只能跟tr,tr里面只能跟td,如果再<tbody>里面直接用模板如<row></row>,浏览器会把模板渲染为与table一个等级，而不是包含关系。所以为了解决这个问题，可以这样： <tr is="row"></tr>,这样依然会渲染为row模板 -->

				<!-- 类似的还有ul,ol里面最好是li,  select里面最好是option,   -->


				<tr is="row"></tr>
				<tr is="row"></tr>
				<tr is="row"></tr>
				<tr is="row"></tr>
				<tr is="row"></tr>

			</tbody>
		</table>



		<!-- 留意这里加了ref="hello",ref的作用是当我们实在通过数据达不到我们预期目的时，我们可以通过this.$refs.hello获取ref为hello所在的dom元素，这里是获取到了<div ref="hello">....</div>这块内容。 -->
		<div ref = "hello" @click="handle">
			this mu ref sentence!
		</div>
	
		
	
	</div>




</body>
<script type="text/javascript">

	Vue.component("row",{
		//这里应该注意到，在子组件中用到的插值表达式,这个插值变量只能是子组件里的data中的数据，  而且最重要的是，此时的data应该是一个函数！！！！由这个data函数返回的数据作为插值变量！！！！而且必须得注意，在组件里面的data不能像根实例那样写，像data:{
		// 	content:"kkkk",
		// 	cc:"llll"
		// }
		// 这种写法是错的！！！！


		data:function() {
			return {
				content:"this is so wonderful",
				cc:"there is no problem"
			}
		},
		template:"<tr> {{ content }} ---- {{ cc }}</tr>"
	})

	var vm = new Vue({
		el:"#app",
		data:{

		},
		methods:{
			handle:function() {
				console.log(this.$refs.hello)//返回ref值为hello的dom元素
			}
		}
		

		
		
		

	})



		
</script>
</html>